import React from 'react';
import Input from '../base/Input.js';

const DeviceRow = React.createClass({
  getInitialState() {
    return {
      index: '',
      pageNo: '',
      // placeholderRed: false,
      formData: {
        sn: '',
        remark: ''
      }
    };
  },
  componentWillMount() {
    this.setState(
      { index: this.props.index,
        pageNo: this.props.pageNo,
        formData:
          { sn: this.props.item.sn,
            remark: this.props.item.remark,
            id: this.props.item.id,
            error: this.props.item.error
          }
      });
  },
  componentWillReceiveProps(nexProps) {
    this.setState({ index: this.props.index, pageNo: this.props.pageNo, fromData: { sn: nexProps.cn, remark: nexProps.remark } });
  },
  handleChange(targetData) {
    // 序列化表单
    // ============
    const fData = this.state.formData;
    fData[targetData.name] = targetData.value;
    this.setState({
      formData: fData,
    });
    if (this.props.fromModel) {
      this.props.fromModel({ Data: fData, index: this.state.index });
    }
  },
  handleBlur(targetData) {
    // const fData = {
    //   sn: targetData.sn,
    //   remark: targetData.remark
    // };
    if (this.props.updateOne) {
      this.props.updateOne({ Data: this.state.formData, id: this.state.formData.id });
    }

    // if (targetData.value === '') {
    //   console.log('==================')
    //   this.setState({ placeholderRed: true });
    //   console.log('00000000ppppppppppp')
    // } else {
    //   console.log('1111111111111111111')
    //   this.setState({ placeholderRed: false });
    // }
  },
  delClick() {
    if (this.props.delOne) {
      this.props.delOne(this.state.formData);
    }
  },
  // testData(ref) {
  //   return this.a = this.state.formData
  // },
  render() {
    const { formData } = this.state;
    // console.log(placeholderRed)
    return (
      <tr>
        <td className={!formData.sn ? 'placeholder-error' : ''}>
          <Input
            data-target="sn"
            type="text"
            value={formData.sn}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            placeholder="必填"
            className={formData.error ? 'color-red' : ''}
            autoFocus={this.props.autoFocus}
          />
        </td>
        <td className="placeholder-normal">
          <Input
            data-target="remark"
            type="text"
            value={formData.remark}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            placeholder="选填"
          />
        </td>
        <td className="border-d8"><a onClick={this.delClick}>删除</a></td>
      </tr>
    );
  }
});

export default DeviceRow;
